<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <style>
        .form-container {
            border-radius: 10px;
            margin: 0px auto;
            width: 550px;
            padding: 15px 10px 5px 15px;
            background: #fff;
            /*border: 1px solid #eaeaea;*/
            text-align: left;
            /*box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);*/
        }

        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: darkorange;
        }

        .el-form-item {
            margin-bottom: 10px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col>
            <el-form ref="businessForm" :model="businessForm" class="form-container" label-position="left" label-width="100px">
                <h1 class="title">商家信息</h1>
                <el-form-item label="用户昵称">
                    <el-input type="text" style="width: 250px" v-model="businessForm.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱">
                    <el-input type="text" style="width: 250px" v-model="businessForm.email" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户电话">
                    <el-input type="text" style="width: 250px" v-model="businessForm.tel" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户头像">
                    <span>
                        <img :src="businessForm.imgSrc" min-width="100%" height="200"/>
                    </span>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
<script th:inline="javascript">
    new Vue({
        el: "#app"
        ,
        data: {
            businessForm: {
                name: '',
                email: '',
                tel: '',
                imgSrc: ''
            }
        }
        ,
        methods: {
            getBusiness() {
                let _this = this;
                $.post("/business/getBusiness", function (d) {
                    console.log(d);
                    console.log(d.name);
                    _this.businessForm.name=d.name;
                    _this.businessForm.email=d.email;
                    _this.businessForm.tel=d.tel;
                    _this.businessForm.imgSrc=d.imgSrc;
                })
            }
        }
        ,
        created() {
            this.getBusiness()
        }
    })
</script>
</body>
</html>